<template>
    <view class="container">
        <header-bar :config="config"></header-bar>
        <oreder-header @searchFn="searchFn" @doFilter="doFilter"></oreder-header>
        <!-- <tab-bar :tabs="items" nobg="nobg" @clickTab="clickTab" :tabIndex="tabIndex"></tab-bar> -->
        <view class="main">
            <view class="product-main-list" :style="{ height: listHeight }">
                <order-list
                    v-if="loadOk"
                    ref="productList"
                    :height="listHeight"
                    :orderId="orderId"
                    :selectData="selectData"
                    @changeData="changeData"
                    @changeCheck="changeCheck"
                    @showSnewm="showSnewm"
                    :requestData="requestData"></order-list>
            </view>
        </view>
        <view class="bottom-bar order-bottom">
            <checkbox-group @change="checkboxChange">
                <label class="item-radio custom-checkbox-box">
                    <checkbox class="checkbox-mark" :checked="isSelectAllFn(selectData)" value="all"></checkbox>
                    <custom-checkbox :isSelect="isSelectAllFn(selectData)"></custom-checkbox>
                    <text class="text">全选</text>
                </label>
            </checkbox-group>
            <text class="btn btn-success" v-if="selectData.length" @click="orderTakeNotify">批量通知可提货</text>
            <text class="btn btn-gray" v-else>批量通知可提货</text>
        </view>
    </view>
</template>

<script>
import { mapMutations, mapState, mapGetters } from "vuex"
import orederHeader from "./order-header.vue"
import orderList from "./order-list.vue"
import tabBar from "@/components/common/tab-bar.vue"
import storage from "@/uni-sub-base/utils/storage.js"
import { getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"
import customCheckbox from "@/components/common/custom-checkbox.vue"
import { orderTakeNotify } from "@/service/api/communtiyGroup.js"
export default {
    components: {
        orederHeader,
        orderList,
        tabBar,
        customCheckbox,
    },
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
        isTemp: {
            type: Boolean,
            default: false,
        },
        orderId: {
            type: String,
            default: "",
        },
    },
    watch: {
        visible: {
            handler(newVal) {
                if (newVal) {
                    this.setStatusBarStyle("dark")
                    this.getListHeight()
                    this.changeTab()
                }
            },
            immediate: true,
        },
        //监听更新
        getUpOrderView(e) {
            this.refresh()
        },
        orderId(news, old) {},
    },
    data() {
        return {
            optEmpty: {
                icon: "/static/img/empty.png", // 图标路径 (建议放入static目录, 如 /static/img/mescroll-empty.png )
                tip: "~ 暂无数据 ~", // 空提示
            },
            isloadding: false,
            tabIndex: 0,
            popSn: "",
            listHeight: "", //list所需高度
            loadOk: false,
            searchKey: "",
            requestData: {
                searchKey: "",
                userType: 1,
                // startTime: "",
                // endTime: "",
                // orderType:'all',
                // __index: 0
            },
            config: {
                title: "关联订单",
                back: true,
                centerSlot: true,
                barPlaceholder: true,
            },
            datas: [],
            selectData: [],
        }
    },
    computed: {
        ...mapGetters(["getUpOrderView"]),
    },
    onReady() {},
    created() {
        // this.config.back = this.isTemp
    },
    onShow() {},
    mounted() {
        this.getListHeight()
    },
    methods: {
        changeCheck(obj) {
            let isSelect = obj.isSelect
            let id = obj.id
            if (isSelect) {
                //全选
                this.datas.forEach((e) => {
                    if (e.ID == id) {
                        this.selectData.push(e.ID)
                    }
                })
            } else {
                //取消全选
                this.selectData.splice(
                    this.selectData.findIndex((item) => item === id),
                    1,
                )
            }
            this.$forceUpdate()
        },
        checkboxChange(e) {
            let values = e.detail.value
            let isAll = values.length > 0 && values[0] == "all"
            let ids = []
            if (isAll) {
                this.datas.forEach((item) => {
                    ids.push(item.ID)
                })
            }
            this.selectData = ids
        },
        isSelectAllFn(data) {
            let isSelectAll = this.datas.length > 0 && this.datas.length == data.length
            return isSelectAll
        },
        changeData(datas) {
            this.datas = datas
        },
        // 批量通知可提货
        orderTakeNotify() {
            orderTakeNotify({
                orderIds: this.selectData.join(","),
            }).then((res) => {
                if (res.State == 1) {
                    this.easyToast("通知成功")
                }
            })
        },
        showSnewm(item, datas) {
            this.popSn = item
            this.$refs.deliveryCode.open()
        },
        changeTab() {
            //判断是要切到哪个tab
            let orderType = storage.getCache("orderType")
            if (orderType) {
                for (var i = 0; i < this.items.length; i++) {
                    let item = this.items[i]
                    if (item.state == orderType) {
                        this.tabIndex = i
                    }
                }
                storage.removeCache("orderType")
            }
            let miniProgramState = storage.getCache("miniProgram")
            if (miniProgramState) {
                this.refresh()
                storage.removeCache("miniProgram")
            }
        },
        getListHeight(element) {
            //获取商品高度
            getElementHeight(this, ".main", (e) => {
                // e = this.isTemp?e-54:e-54
                this.listHeight = e - uni.upx2px(150) + "px"
                this.loadOk = true
            })
        },
        swiperChange(e) {
            let tabIndex = e.detail.current
            this.clickTab(tabIndex)
        },
        //tab切换
        clickTab(index) {
            if (this.tabIndex != index) {
                this.tabIndex = index
            }
        },
        //搜索
        searchFn(searchKey) {
            this.requestData.searchKey = searchKey
            this.refresh()
        },
        //筛选
        doFilter(data) {
            this.refresh()
        },
        refresh() {
            this.$refs.productList.refresh(this.requestData)
        },
    },
}
</script>

<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: column;
}
.code-pop {
    width: 640rpx;
    background: #ffffff;
    border-radius: 32rpx;
    position: relative;
    .closeimg {
        width: 64rpx;
        height: 64rpx;
        position: absolute;
        bottom: -96rpx;
        left: 50%;
        margin-left: -32rpx;
    }
}
.code-top {
    position: relative;
    height: 208rpx;
    background: $app-color-main;
    border-radius: 32rpx 32rpx 0 0;
    image {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 640rpx;
        height: 114rpx;
    }
}
.c-t-title {
    font-size: 42rpx;
    text-align: center;
    color: #fff;
    padding: 24rpx 0 12rpx 0;
}
.c-t-list {
    display: flex;
    justify-content: center;
    & > view {
        margin: 0 22rpx;
        color: #fff;
        font-size: 22rpx;
    }
}
.code-info {
    position: relative;
    width: 448rpx;
    height: 448rpx;
    background: #ffffff;
    box-shadow: 0px 4rpx 16rpx 0px rgba(0, 0, 0, 0.2);
    border-radius: 16rpx;
    margin: -48rpx auto 0 auto;
    padding: 64rpx;
    .uqrcode {
        width: 448rpx;
        height: 448rpx;
        display: block;
    }
}
.desc {
    text-align: center;
    font-size: 28rpx;
    font-weight: bold;
    padding: 24rpx 0 16rpx 0;
}
.desc1 {
    text-align: center;
    font-size: 28rpx;
    font-weight: bold;
    padding: 0rpx 0 40rpx 0;
}

.order-bottom {
    height: 54px;
    justify-content: space-between;
    .item-radio {
        display: flex;
        flex-direction: row;
        align-items: center;

        .text {
            margin-left: 10rpx;
        }
    }
}
</style>
